<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm=Vue.createApp({
        data(){
            return{
                counts:5,
                prices:10,
                message:'总价',
                watchTolalPrices:''

            }
        },
        computed:{
            total(){
                console.log('总价发生变化')
                return Date.now()+'-->'+this.counts * this.prices+'元'
            }
        },
        methods:{
            getTotal(){
                console.log("总价发生变化")
                return this.message+Date.now()+'-->'+this.counts*this.prices;
            }
        },
        template: ` <div> 数量：{{counts}} 个，
                    价格：{{prices}} 元</div>
                    <div>总价： {{total}}</div>        `,
        watch:{
            prices(){
                console.log("watch --> 价格已发生变化");
                this.watchTolalPrices=this.counts*this.prices+'元'
            },
            counts(){
                console.log("watch --> 数量已发生变化");
                this.watchTolalPrices=this.counts*this.prices+'元'
            }
        }
    }).mount("#app")
</script>
</html>